<template>
  <div id="background" class="verify order-submit">
    <!-- //顶部导航栏 -->
    <van-nav-bar
      title="确认订单"
      left-text="返回"
      left-arrow
      @click.native="$router.go('-1')"
    ></van-nav-bar>
    <!-- //水平分割线 -->
    <div class="decorate"></div>
    <!-- //地址区域 -->
    <van-cell>
      <div class="flex area jc-sb aic">
        <van-icon name="location-o"></van-icon>
        <div class="flex2 jc-c ml-15 fg2">
          <p class="flex">
            <span class="custom-title">张三 </span>
            <span class="custom-title">13800000000</span>
          </p>
          <span class="custom-title fonts"> 广东深圳南山区高新园 </span>
        </div>
        <van-icon class="f999" name="arrow" />
      </div>
    </van-cell>
    <div id="goods">
      <van-cell-group>
        <van-cell title="运费(满50元免运费)" />
      </van-cell-group>
      <van-card
        :num="3"
        :price="3000"
        desc="生态基地种植 饱满圆润脆甜 皮薄肉厚多汁"
        title="A级-阳光冬枣（中）约2.6-3斤"
        thumb="https://mall.s.maizuo.com/9aba9f63c14a9aa7d469b62a0f9cde41.png"
      ></van-card>
      <!-- //尾部单元格 -->
      <van-cell-group>
        <van-cell title="商品总金额" value="¥100.00" />
      </van-cell-group>
      <van-cell-group>
        <van-cell title="运费" value="¥20.00" />
      </van-cell-group>
    </div>

    <div id="cell">
      <van-cell
        is-link
        title="优惠券"
        icon="comment-o"
        value="共3张可用"
      ></van-cell>
      <van-cell icon="comment-o" value="0张券可用" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">苏打券</span>
        </template>
      </van-cell>
      <van-cell icon="gem-o" value is-link>
        <p class="flex jc-sb">
          <span class="custom-title">余额</span>
          <span class="custom-title red">¥0.00</span>
        </p>
      </van-cell>
      <van-cell icon="balance-list-o" value="不开发票" is-link>
        <!-- 使用 title 插槽来自定义标题 -->
        <template slot="title">
          <span class="custom-title">发票</span>
        </template>
      </van-cell>
    </div>

    <!-- 优惠券弹窗 -->

    <!-- 支付方式弹窗 -->
    <van-submit-bar
      :price="3000"
      tip
      button-text="提交订单"
      @submit="submitOrder"
    />
    <van-action-sheet v-model="show" title="请选择支付方式">
      <PayWay></PayWay>
    </van-action-sheet>
  </div>
</template> 


<script>
import PayWay from "./verify/PayWay.vue";
import $http from "@/utils/http";
export default {
  components: {
    PayWay,
  },
  data() {
    return {
      preOrderId: "",
      show: false,
      // 预订单详情对戏
      detail: {},
    };
  },

  created() {
    this.preOrderId = this.$route.query.preOrderId;
    this.getDetail();
  },

  methods: {
    // 获取详情
    getDetail() {
      let params = {
        preOrderId: this.preOrderId,
      };
      $http.get("/preOrder/detail", { params }).then((res) => {
        this.detail = res.result;
      });
    },

    // 提交订单
    submitOrder() {
      let params = {
        addressInfo: "asdfasdfasdfasdf",
        allFee: this.detail.totalMoney,
        preOrderId: this.preOrderId,
      };
      $http.post("/order/create", params).then((res) => {
        let data = {
          allFee: res.result.allFee,
          createTime: res.result.createTime,
          orderId: res.result.orderId,
          qrcode: res.result.qrcode,
        };
        // // 通过params传参
        // this.$router.push({
        //   name: 'pay',
        //   params: data
        // });
        // 通过query传参
        this.$router.push({
          path: '/order/pay',
          query: data
        });
      });
    },
  },
};
</script>

<style lang="less">
@import "./verify.less";
.order-submit {
  padding-bottom: 60px;
}
</style>